<template>
  <div>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    list-type="picture-card"
    :http-request="getFile"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove">
    <i class="el-icon-plus"></i>
  </el-upload>



  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },

      getFile(item) {
       // alert("确定提交吗？？？")
       //  this.$axios.post("/upImg", {
       //
       //  }).then(response => {
       //    if (response.data == "1") {
       //
       //      alert("头像修改成功")
       //    } else if(response.data == "2") {
       //      alert("头像修改失败")
       //    }
       //  }).catch(err => {
       //    alert(err)
       //  })
        console.log(item.file)
        this.file = item.file
        const fd = new FormData()
        fd.append('fileName', this.file)
        const config = {headers: { 'Content-Type': 'multipart/form-data' }}
        this.$axios.post('/upImg', fd, config
        ).then(response => {
          if (response.data=='1'){
            this.$message({
              type: 'success',
              message: '添加成功!'
            })

          }else{
            this.$message({
              type: 'info',
              message: '发送失败'
            })
          }
        }).catch(err => {
          this.$message({
            type: 'info',
            message: '发送失败'
          })
        })
      },
      },
  }
</script>

<style scoped>

</style>
